<!-- LoginDialog.vue -->
<script setup>
import { defineProps, defineEmits, computed } from 'vue';
import Login from './Login.vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue', 'close']);

const internalVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});

const handleClose = () => {
  internalVisible.value = false;
  emit('close');
};
</script>

<style scoped>
.custom-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.el-dialog {
  width: 30%;
  max-width: 400px;
  /* 设置最大宽度以适应不同屏幕 */
  min-width: 300px;
  /* 设置最小宽度以适应不同屏幕 */
  margin: 0 auto;
  /* 水平居中 */
}

.el-dialog__body {
  padding: 20px;
}
</style>
